<template>
    <div ref="container" style="display: none;">
    	<div ref="mask" class="ivu-modal-mask" :style="maskStyle" @click="onMaskClick"></div>
        <div ref="frame" 
        	:class="mainClass" 
        	:style="mainStyle"
        	@mousedown="onFrameMouseDown">
            <div v-if="header" class="ivu-modal-header" @mousedown="onHeaderMouseDown">
            	<slot name="header">
            		<div class="ivu-modal-header-inner">
						<img v-if="icon" :src="icon" />
						<div class="ivu-modal-header-inner-text">{{title}}</div>
					</div>
					<a v-if="max" class="ivu-modal-max" :style="maxStyle">
						<Icon :type="maxType" @click="changeFullScreen" />
					</a>
					<a v-if="closable" class="ivu-modal-close" @click="onClose">
		            	<Icon type="ios-close"></Icon>
		            </a>
            	</slot>
            </div>
            <div class="ivu-modal-body">
            	<slot></slot>
            </div>
            <div class="ivu-modal-footer" v-if="footer">
            	<slot name="footer"></slot>
            </div>
            <div 
            	v-if="resizable && !full" 
            	class="ivu-modal-resize"
            	@mousedown="onResizeMouseDown"></div>
        </div>
    </div>
</template>
<script type="text/javascript">
import { Icon } from 'view-design';
import { transferIndex, transferIncrease } from 'view-design/src/utils/transfer-queue';

const temp = {
	mouseup: null,
	mousemove: null
}

export default {
    props: {
    	value: {
    		type: Boolean,
    		default: true 
    	},
    	icon: String,
    	title: String,
    	header: {
    		type: Boolean,
    		default: true
    	},
    	footer: {
    		type: Boolean,
    		default: true
    	},
        zIndex: {
            type: Number,
            default: 1000
        },
        width: {
        	type: Number | String,
        	default: 520
        },
        height: {
        	type: Number | String,
        	default: 520
        },
        closable: {
        	type: Boolean,
        	default: true
        },
        max: {
        	type: Boolean,
        	default: true
        },
        fullscreen: {
        	type: Boolean,
        	default: false
        },
        mask: {
        	type: Boolean,
        	default: false
        },
        maskClose: {
        	type: Boolean,
        	default: false
        },
        resizable: {
        	type: Boolean,
        	default: true
        },
        dragable: {
        	type: Boolean,
        	default: true
        },
        position: {
        	type: Array,
        	default: () => []
        },
        transparent: {
        	type: Boolean,
        	default: false
        },
        animateIn: {
        	type: String,
        	default: "bounceIn"
        },
        animateOut: {
        	type: String,
        	default: "bounceOut"
        }
    },
    data() {
    	return {
    		visible: false,
    		inout: false,
    		full: false,
    		order: 0,
    		orderMask: 0,
    		left: 0,
    		top: 0,
    		frameWidth: 520,
    		frameHeight: 520,
    		drag: {
    			start: false,
    			x: 0,
    			y: 0,
    			left: 0,
    			top: 0
    		},
    		resize: {
    			start: false,
    			x: 0,
    			y: 0,
    			width: this.width,
    			height: this.height
    		}
    	};
    },
    computed: {
    	maxStyle() {
			return {
				right: this.closable ? "32px" : "8px"
			}
		},
		maxType() {
			return this.full ? 'md-contract' : 'md-expand';
		},
		maskStyle() {
			return {
				zIndex: this.orderMask + this.zIndex,
				display: this.mask && this.visible ? "block" : "none"
			}
		},
		mainClass() {
			return [
				"ivu-modal-content", 
				this.dragable && !this.full ? "ivu-modal-content-drag" : "", 
				"ivu-modal-frame", 
				this.inout ? "animated " + this.animateIn : "animated " + this.animateOut, 
				this.transparent ? "ivu-transparent" : ""];
		},
        mainStyle() {
        	var width = typeof(this.frameWidth) == 'number' ? this.frameWidth + "px" : this.frameWidth;
        	var height = typeof(this.frameHeight) == 'number' ? this.frameHeight + "px" : this.frameHeight;
            return this.full ? {
            	display: this.visible ? "" : "none",
                position: "absolute",
                width: "100%",
                height: "100%",
                top: 0,
                left: 0,
                zIndex: this.order + this.zIndex,
				backgroundColor: this.transparent ? "rgba(55,55,55, 0.6)" : ""
            } : {
            	display: this.visible ? "" : "none",
                position: "absolute",
                width: width,
                height: height,
                top: this.top + "px",
                left: this.left + "px",
                zIndex: this.order + this.zIndex,
				backgroundColor: this.transparent ? "rgba(55,55,55, 0.6)" : ""
            };
        }
    },
    methods: {
    	init() {
	    	this.full = this.fullscreen;
	    	this.frameWidth = this.width;
	    	this.frameHeight = this.height;
	    	this.toTop();
	    	this.setPosition();
	    	this.$emit("on-frame", this);
    	},
    	onMaskClick() {
    		if(this.maskClose) {
    			this.onClose();
    		}
    	},
    	onClose(event) {
    		this.close();
    	},
    	changeFullScreen(e) {
			this.full = !this.full;
		},
		toTop() {
			if(this.order < transferIndex) {
				transferIncrease();
				this.orderMask = transferIndex;
				transferIncrease();
	    		this.order = transferIndex;
	    	}
		},
		setPosition() {
			var height = document.body.clientHeight || document.documentElement.clientHeight;
			var left = (document.body.clientWidth - this.frameWidth) / 2;
			var top = (height - this.frameHeight) / 2;
			var pos = null;
			for(var i=0; i<this.position.length && i < 2; i++) {
				pos = this.position[i].toLowerCase();
				if(pos == "left") {
					left = 0;
				} else if(pos == "top") {
					top = 0;
				} else if(pos == "right") {
					left = document.body.clientWidth - this.frameWidth;
				} else if(pos == "bottom") {
					top = height - this.frameHeight;
				}
			}
			this.left = left;
			this.top = top;
		},
		onFrameMouseDown(event) {
			this.toTop();
		},
        onHeaderMouseDown(event) {
        	if(this.dragable && !this.full) {
	        	this.drag.start = true;
	            this.drag.x = event.clientX;
	            this.drag.y = event.clientY;
	            this.drag.top = this.top;
	            this.drag.left = this.left;
	            temp.mousemove = document.body.onmousemove;
            	temp.mouseup = document.body.onmouseup;
	            document.body.onmousemove = (event) => {
	            	this.onHeaderMouseMove(event);
	            }
	            document.body.onmouseup = (event) => {
	            	this.onHeaderMouseUp(event);
	            }
	        }
        },
        onHeaderMouseMove(event) {
        	if(this.dragable && this.drag.start) {
	        	this.left = this.drag.left + event.clientX - this.drag.x;
	        	this.top = this.drag.top + event.clientY - this.drag.y;
	        }
        },
        onHeaderMouseUp(event) {
        	if(this.dragable && this.drag.start) {
        		this.drag.start = false;	
        		document.body.onmousemove = temp.mousemove;
        		document.body.onmouseup = temp.mouseup;
        	}
        },
        onResizeMouseDown(event) {
        	if(this.resizable) {
	        	this.resize.start = true;
	            this.resize.x = event.clientX;
	            this.resize.y = event.clientY;
	            this.resize.width = this.frameWidth;
	            this.resize.height = this.frameHeight;
	            temp.mousemove = document.body.onmousemove;
	            temp.mouseup = document.body.onmouseup;
	            document.body.onmousemove = (event) => {
	            	this.onResizeMouseMove(event);
	            }
	            document.body.onmouseup = (event) => {
	            	this.onResizeMouseUp(event);
	            }
	        }
        },
        onResizeMouseMove(event) {
        	if(this.resizable && this.resize.start) {
	        	this.frameWidth = this.resize.width + event.clientX - this.resize.x;
	        	this.frameHeight = this.resize.height + event.clientY - this.resize.y;
	        }
        },
        onResizeMouseUp(event) {
        	if(this.resizable && this.resize.start) {
	        	this.resize.start = false;
	        	document.body.onmousemove = temp.mousemove;
	        	document.body.onmouseup = temp.mouseup;
	        }
        },
        show() {
        	this.$emit('input', true);
        	this.visible = true;
        	this.$nextTick(() => {
        		this.inout = true;
        	});
        	this.$emit('on-show');
        },
        close() {
        	this.$emit('input', false);
        	this.inout = false;
        	this.$nextTick(() => {
        		setTimeout(() => {
        			this.visible = false;
        			this.$emit('on-close');
        		}, 300);
        	});
        }
    },
    watch: {
    	value(newVal) {
    		if(newVal) {
    			this.show();
    		}
    	}
    },
    mounted() {
    	this.init();
        this.$nextTick(() => {
            if (document.body.append) {
                document.body.append(this.$refs.frame);
                document.body.append(this.$refs.mask);
            } else {
                document.body.appendChild(this.$refs.frame);
                document.body.appendChild(this.$refs.mask);
            }
            if(this.value) {
            	this.show();
            }
        });
    },
    beforeDestroy() {
        var container = this.$refs.container;
        if (container.append) {
            container.append(this.$refs.frame);
            container.append(this.$refs.mask);
        } else {
            container.appendChild(this.$refs.frame);
            container.appendChild(this.$refs.mask);
        }
    },
    components: {
    	Icon
    }
}
</script>
<style type="text/css">
	.ivu-transparent .ivu-modal-header {
		background-color: transparent;
	}

	.ivu-transparent .ivu-layout-content {
		background-color: transparent;
	}

	.ivu-modal-max {
		position: absolute;
		font-size: 12px;
		z-index: 1;
		top: 5px;
		overflow: hidden;
		cursor: pointer;
	}

	.ivu-modal-max i {
		font-size: 24px;
		color: #999;
	}

	.ivu-modal-frame {
		flex-direction: column;
		display: -webkit-flex; 
		display: flex;
	}

	.ivu-modal-frame .ivu-modal-header {
		padding: 6px 8px;
	}

	.ivu-modal-frame .ivu-modal-body {
		position:relative;
		padding: 0.5rem;
		webkit-box-flex: 1;
		-ms-flex: auto;
		flex:auto;
		overflow: hidden;
		margin: 0;
	}

	.ivu-modal-frame .ivu-modal-close {
		top: 5px;
	}
	.ivu-modal-frame .ivu-modal-close i {
		font-size: 24px;
	}

	.ivu-modal-frame .ivu-modal-header img {
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
	}

	.ivu-modal-frame .ivu-modal-header-inner-text {
		display: inline-block;
		width: 20px;
		height: 20px;
		font-size: 14px;
		line-height: 20px;
	}
	.ivu-modal-resize {
		position: absolute;
		z-index: 5;
		right: 0;
		bottom: 0;
		width: 5px;
		height: 5px;
		cursor: se-resize;
	}
	.ivu-modal-bottom {
	    padding: 2px 18px 2px 18px;
	    text-align: right;
	}
</style>